<template>
  <div class="list-container" ref="wrapper">
    <div class="list-info-wrapper">
      <div>
        <h2 class="h2">当前城市</h2>
        <ul class="hot-list clearfix">
         <li class="hot-item">{{this.currentCity}}</li>
        </ul>
      </div>
      <div>
        <h2 class="h2">热门城市</h2>
        <ul class="hot-list clearfix">
          <li
            class="hot-item"
            v-for="item of hotCities"
            :key="item.id"
            @click="handleCityClick(item.name)"
          >{{item.name}}</li>
        </ul>
      </div>
      <div v-for="(item, key) of cities" :key="key">
        <h2 class="h2" :ref="key">{{key}}</h2>
        <ul class="clearfix city-list">
          <li
            class="item"
            v-for="innerItem of item"
            :key="innerItem.id"
            @click="handleCityClick(innerItem.name)"
          >{{innerItem.name}}</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
import { mapState } from 'vuex'
export default {
  name: 'CityList',
  props: {
    cities: Object,
    hotCities: Array,
    letter: String
  },
  methods: {
    handleCityClick (city) {
      this.$store.commit('changeCity', city)
      this.$router.push('/')
    }
  },
  watch: {
    letter () {
      if (this.letter) {
        this.scroll.scrollToElement(this.$refs[this.letter][0])
      }
    }
  },
  mounted () {
    this.scroll = new BScroll(this.$refs.wrapper, {
      click: true
    })
  },
  computed: {
    ...mapState({
      currentCity: 'city'
    })
  }
}
</script>

<style lang="stylus" scoped>
@import '~styles/variable.styl'
@import '~styles/mixins.styl'
  .list-container
    position: absolute
    left: 0
    top: 1.5rem
    bottom: 0
    right: 0
    overflow: hidden
    .h2
      height: .6rem
      line-height: .6rem
      color: #363833
      padding-left: .2rem
      background: #f5f5f5
      font-size: .28rem
    .hot-item
      width: 2rem
      height: .4rem
      line-height: .4rem
      border: .04rem solid #e6e6e5
      border-radius: .05rem
      text-align: center
      margin: .2rem
      float: left
    .city-list
      .item
        height: .6rem
        line-height: .6rem
        padding-left: .2rem
        border-bottom: .04rem solid #f2f2f1
</style>
